<template>
  <q-btn flat square unelevated padding="0" no-caps :ripple="false" style="margin: auto">
    <div class="header-button-content">
      <svg width="192" height="48" viewBox="0 0 192 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M2.00024 32.8151L15.1718 46.0039L187.474 46.0036L190 43.4817V37.0604L187.841 34.6159V20.5167L189.999 18.0717V15.2007L176.927 2.00391L4.52621 2.01126L2.00024 4.53322V11.41L4.15844 13.8547V27.9542L2.00024 30.3983V32.8151Z"
          fill="#5F8CEA" />
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M0 33.664L14.3441 48.0077L188.325 48.0071L192 44.3331L192 14.2975L177.702 0L3.67426 0.00737014L0 3.68167C0 14.4554 0 22.7882 0 33.664ZM1.95874 32.8328L15.1361 46.0486L187.514 46.0483L190.041 43.5212V37.0868L187.882 34.6374V20.5094L190.041 18.0594V15.1825L176.963 1.95876L4.48582 1.96613L1.95874 4.49323V11.384L4.11789 13.8337V27.962L1.95874 30.4112V32.8328Z"
          fill="#4A4AFF" />
      </svg>


      <div class="flex flex-center text-white" style="font-weight: 700; font-size: 24px">
        В будущее
      </div>
    </div>
  </q-btn>
</template>

<script>
export default {
  // name: 'ComponentName',
  setup() {
    return {};
  },
};
</script>
<style scoped>
.header-button-content {
  display: grid;
}

.header-button-content>svg,
.header-button-content>div {
  grid-area: 1/-1;
}

.header-button-wide {
  padding-right: 14px;
}

.header-button-text {
  margin: auto;
}

svg * {
  transition: all 1s;
}
</style>
